<template>
  <!-- 符号、代号和缩略语章节可以自由编辑标题 -->
  <p
    :class="className"
    :contenteditable="contenteditable"
    :data-type="blockData.dataType"
    :data-id="blockData.textData.dataId"
    :data-lang="blockData.textData.dataLang"
    :data-block-id="blockData.blockId"
    :data-block-type="blockData.blockType"
    :data-index="blockData.blockIndex"
    :data-refcontent="bizExtra.refcontent"
    :data-refversion="bizExtra.refversion"
    :data-maincontentid="bizExtra.mainContentId"
    :data-source-id="bizExtra.sourceId"
    :data-refname="bizExtra.refname"
    :data-refdate="bizExtra.refdate"
    :data-docno="bizExtra.docno"
    :data-link-url="linkUrl"
    :data-variable-id="variableId"
    :[dataIsExample]="blockData.textData.isExample ? '1' : null"
    v-if="!blockData.dataType.includes('variable_string') && !blockData.dataType.includes('variable_hide_string')"
  >
    <iframe-checkbox :blockData="blockData" />
    <template v-for="(item, i) of blockData?.textData?.contentList || []">
      <template v-if="item.contentType === undefined || item.contentType === 'text'">
        <template v-if="pageType === 'reference'">{{ item.content }}</template>
        <template v-else-if="pageType === 'normative_references'">
          <template v-if="isNRPara">
            <span class="nr-code" :key="i + '-nr-code'">{{ getNRCode(item) }}</span>
            <span class="nr-name" :key="i + '-nr-name'">{{ getNRName(item) }}</span>
          </template>
          <template v-else>{{ getNRContent(item) }}</template>
        </template>
        <template v-else>{{ item.fullContent }}</template>
        <template v-if="item.fullContent.length === 0">&#8203;</template>
      </template>
      <sub v-else-if="item.contentType === 'sub'" data-type="sub" :key="i">{{ item.fullContent }}</sub>
      <sup v-else-if="item.contentType === 'sup'" data-type="sup" :key="i">{{ item.fullContent }}</sup>
      <FSpan v-else-if="item.contentType === 'footnote'" :key="'fn_' + i" :item="item">&nbsp;</FSpan>
      <RefSpan v-else-if="item.contentType === 'refdoc' || item.contentType === 'refchapter'" :key="i" :item="item" />
      <IndexSpan v-else-if="item.contentType === 'bizIndex'" :key="i" :item="item" />
      <img
        v-else-if="item.contentType === 'inline_formula'"
        data-type="inline_formula"
        :key="i"
        :data-id="item.dataId"
        :width="item.formulaData.width"
        :height="item.formulaData.height"
        :src="item.formulaData.url"
        :data-latex="item.formulaData.latex || ''"
      />
      <img
        v-else-if="item.contentType === 'inline_figure'"
        data-type="inline_figure"
        :key="i"
        :data-id="item.dataId"
        :width="item.figureData.attributes.width"
        :height="item.figureData.attributes.height"
        :src="item.figureData.attributes.url"
      />
      <FmtSpan v-else-if="item.contentType === 'keyword'" :key="i" :item="item" />
      <!-- <ImageBlock v-else-if="item.contentType === 'variable_formula'" :key="i" :item="item" /> -->
      <CommonSpan v-else :key="i" :item="item" />
    </template>
  </p>
</template>

<script>
import { isListTitle } from '@/constants/structure'
import store from '@/store'
import CommonSpan from './span/CommonSpan.vue'
import ImageBlock from './span/ImageBlock.vue'
import RefSpan from './span/RefSpan.vue'
import FmtSpan from './span/FormatterSpan.vue'
import IndexSpan from './span/IndexSpan.vue'
import FSpan from './span/FootnoteSpan.vue'
import IframeCheckbox from '../IframeCheckbox.vue'
import { nrZh, nrZhStarter } from '@/constants/string'

export default {
  components: { CommonSpan, RefSpan, FmtSpan, IndexSpan, FSpan, IframeCheckbox,ImageBlock },
  props: {
    lang: {
      type: [String, undefined],
      default: undefined
    },
    isTitle: {
      type: Boolean,
      default: false
    },
    contenteditable: {
      type: [Boolean, String],
      default: true
    },
    blockData: {
      type: Object,
      default: () => {
        return {
          contentList: []
        }
      }
    },
    variableId: [String,Number, undefined],
      default: undefined
  }, 
  inject: ['pageType'],
  data() {
    return {
      dataIsExample: 'data-is-example',
      isVariable:false
    }
  },
  methods: {
    isListTitle,
    splitNRStr(item) {
      if (/\s{2,4}/g.test(item.content)) return item.content.split(/\s{2,4}/g)
      return ['', '']
    },
    getNRCode(item) {
      const [code] = this.splitNRStr(item)
      return code
    },
    getNRName(item) {
      const [_, name] = this.splitNRStr(item)
      return name
    },
    getNRContent(item) {
      return item?.content?.startsWith(nrZhStarter) ? nrZh : item.fullContent
    }
  },
  computed: {
    en() {
      // 此处新增的逻辑用于引用标准内容的中英文语言判断
      if (this.lang !== undefined) {
        return this.lang === 'both'
      }
      return this.$store.getters.languageType === 'both'
    },
    bizExtra() {
      return JSON.parse(this.blockData.textData?.contentList?.[0]?.bizExtra || '{}')
    },
    linkUrl() {
      if (this.pageType !== 'normative_references') return ''
      const url = this.bizExtra?.linkUrl || this.blockData?.textData?.contentList?.[0]?.linkUrl || ''
      return url.endsWith('null') ? '' : url
    },
    isNRPara() {
      const isNRPage = this.pageType === 'normative_references'
      return isNRPage && /\s{2,4}/g.test(this.blockData.textData?.contentList?.[0]?.fullContent || '')
    },
    className() {
      let name = ''
      if (this.isTitle) {
        // 如果仅中文 title，如果是中英文 title + title_xx
        const title_xx = this.en ? (this.blockData.textData.dataLang === 'en' ? 'title_en' : 'title_zh') : ''
        return 'title noneditable irremovable ' + title_xx
      }
      if (this.linkUrl) {
        name += 'ref-link '
      }
      if (this.bizExtra?.refcontent) {
        name += 'ref-link '
        if (!this.bizExtra?.mainContentId || this.bizExtra?.mainContentId === 'null') {
          name += 'ref-disabled '
        }
      }
      if (isListTitle(this.blockData.dataType)) {
        name += 'list-title irremovable '
      }
      if (this.isNRPara) {
        name += 'nr-para '
      }
      // 如果是结构块或个人收藏，编辑器页面不能插入结构块或收藏，但可以进行编辑
      if (['block', 'collect'].includes(store.getters.editContentType)) return name
      if (this.blockData.blockType && this.blockData.blockType !== 'collect') {
        name += 'noneditable'
      }
      return name
    }
  }
}
</script>
